<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="favicon.png">
	<title>emoji-picker Demo</title>
	
	<link rel="stylesheet" href="${context}/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	<link rel="stylesheet" href="${context}/css/font-awesome.min.css">
	<!-- Begin emoji-picker Stylesheets -->
	<link href="${context}/emoji/css/emoji.css" rel="stylesheet">
	<!-- End emoji-picker Stylesheets -->
	
	<style>
		@font-face {
		    font-family: 'Emoji';
		    src: url('${context}/fonts/seguiemj.eot');
		    src: url('${context}/fonts/seguiemj.eot?#iefix') format('embedded-opentype'),
		         url('${context}/fonts/seguiemj.ttf') format('truetype');
		}
		body {
		    font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';
		}
		input, button, textatea, select {
		    font-family: 'Segoe UI Emoji', 'Emoji', Tahoma, Geneva, 'Simsun';
		}
		html:root {
		    body {
		        font-family: Tahoma, Geneva, 'Microsoft Yahei', 'Simsun', 'Segoe UI Emoji', 'Emoji';
		    }
		    input, button, textarea, select {
		        font-family: Tahoma, Geneva, 'Microsoft Yahei', 'Simsun', 'Segoe UI Emoji', 'Emoji';
		    }
		}			
	</style>
</head>
<body>
	
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-10">
				<div class="text-left">
					<form id="saveFm" name="saveFm" method="post" action="${context}/add_save.do">
					</p><p class="lead emoji-picker-container">
						<input type="text" id="title" name="title" <#if title??>value="${title?if_exists}"</#if> class="form-control" placeholder="Input field" data-emojiable="true" />
						<input type="text" <#if title??>value="${title?if_exists}"</#if>/>
					</p>
					<#--
					<p class="lead emoji-picker-container">
						<input type="text" name="title" <#if title??>value="${title?if_exists}"</#if> class="form-control" placeholder="Input with max length of 10" data-emojiable="true" maxlength="10">
					</p>
					<p class="lead emoji-picker-container">
						<textarea name="title" <#if title??>value="${title?if_exists}"</#if> class="form-control textarea-control" rows="3" placeholder="Textarea with emoji image input" data-emojiable="true"></textarea>
					</p>
					<p class="lead emoji-picker-container">
						<textarea name="title" <#if title??>value="${title?if_exists}"</#if> class="form-control textarea-control" rows="3" placeholder="Textarea with emoji Unicode input" data-emojiable="true" data-emoji-input="unicode"></textarea>
					</p>
					-->
						<button type="button" onclick="javascript:saveInfo();">保存</button>
					</form>
					
					<p class="lead emoji-picker-container">
						${title?if_exists}
					</p>
										
				</div>
			</div>
		</div>
	</div>
	
    <script type="text/javascript" src="${context}/js/jquery.min.js"></script>
    <!-- Begin emoji-picker JavaScript -->
    <script type="text/javascript" src="${context}/emoji/js/config.js"></script>
    <script type="text/javascript" src="${context}/emoji/js/util.js"></script>
    <script type="text/javascript" src="${context}/emoji/js/jquery.emojiarea.js"></script>
    <script type="text/javascript" src="${context}/emoji/js/emoji-picker.js"></script>
    <!-- End emoji-picker JavaScript -->
    	
	<script type="text/javascript">
		$(function() {
			// Initializes and creates emoji set from sprite sheet
			window.emojiPicker = new EmojiPicker({
			emojiable_selector: '[data-emojiable=true]',
			assetsPath: '${context}/emoji/img/',
			popupButtonClasses: 'fa fa-smile-o'
			});
			// Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
			// You may want to delay this step if you have dynamically created input fields that appear later in the loading process
			// It can be called as many times as necessary; previously converted input fields will not be converted again
			window.emojiPicker.discover();
		});
	</script>
	<script type="text/javascript">
		// Google Analytics
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
		
		ga('create', 'UA-49610253-3', 'auto');
		ga('send', 'pageview');
	</script>
	
	<script type="text/javascript">
		function saveInfo(){
			var title = $("#title").val();
			
			console.log("****** title ****** " + title);
			
			console.log("****** title length ****** " + title.length);
			
			//alert(title.length);
			$("#saveFm").submit();
		}
	</script>
</body>
</html>
